<template>
	<div class="group-member-approval">
		<div class="title-name title-border clear">
			<div class="title-name-l fl">
				<router-link to="/group/manage/selfCreated">我创建的圈组</router-link>
				<router-link to="/group/manage/approval">成员审批</router-link>
			</div>
			<div class="title-name-r fr">
				<router-link to="/group/groupAdd">创建圈组</router-link>
			</div>
		</div>
		<div class="group-approval">
			<template>
				<el-table :data="approvalData" border style="width: 100%">
					<el-table-column prop="user_number" label="账号" width="140" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column fixed prop="user_name" label="用户名" width="100" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="组织架构" width="100" align="center" show-overflow-tooltip>
						<template slot-scope="scope">{{ scope.row.org_name==null?'暂无绑定组织':scope.row.org_name }}</template>
					</el-table-column>
					<el-table-column label="学科" width="100" align="center" show-overflow-tooltip>
						<template slot-scope="scope">{{ scope.row.subject_name==null?'暂无绑定学科':scope.row.subject_name }}</template>
					</el-table-column>
					<el-table-column prop="create_time" label="申请时间" width="140" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="group_name" label="圈组名称" width="140" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column fixed="right" label="操作" align="center">
						<template slot-scope="scope">
							<el-button @click="checkClick(scope.row,2)" type="text" size="small">查看</el-button>
							<el-button type="text" size="small" @click="passClick(scope.row)">通过</el-button>
							<el-button class="reject-btn" type="text" size="small" @click="checkClick(scope.row,1)">拒绝</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<el-pagination background v-if=" total_number > page_size" class="pageing" @current-change="currentChange"
			 :current-page="page_index" :page-size="page_size" layout="total, prev, pager, next, jumper" :total="total_number">
			</el-pagination>
		</div>
		<el-dialog :title="checkOrNot==1?'拒绝理由':'查看'" :visible.sync="groupDialogVisible" width="400px" @close="closeDialog">
			<el-row label="课程简介" class="group-selfCreated-textarea" v-if="checkOrNot==1">
				<el-input type="textarea" :rows="5" resize="none" v-model.trim="rejectReason" maxlength="100" :placeholder="checkOrNot==1?'输入拒绝理由,不超100字':''">
				</el-input>
				<span class="numberWord">
					<i>{{ rejectReason.length }}</i>/100</span>
			</el-row>
			<el-row v-if="checkOrNot==2">
				<p class="lookReason">{{checkComment}}</p>
			</el-row>
			<span slot="footer" class="dialog-footer" v-if="checkOrNot==1">
				<el-button type="primary" plain size="small" @click="closeDialog">取 消</el-button>
				<el-button type="primary" size="small" @click="sureReject(r_group_id,r_user_id,2,rejectReason)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				groupDialogVisible: false,
				checkComment: "",
				rejectReason: "",
				page_index: 1,
				page_size: 10,
				total_number: 0,
				orderby: "time",
				// loading: true,
				approvalData: [],
				r_group_id: "",
				r_user_id: "",
				checkOrNot: null
			};
		},
		created() {
			this.get_groupList();
		},
		methods: {
			// 拒绝加入弹窗关闭事件
			closeDialog() {
				this.groupDialogVisible = false;
				this.rejectReason = "";
			},
			passClick(row) {
				this.r_group_id = row.group_id;
				this.r_user_id = row.user_id;
				this.$confirm("确定通过此用户审核吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
						customClass: "confirm-them"
					})
					.then(() => {
						this.sureReject(this.r_group_id, this.r_user_id, 1, '');
					})
					.catch(() => {});
			},
			checkClick(row, checkOrNot) {
				this.checkOrNot = checkOrNot;
				if (checkOrNot == 2) {
					this.checkComment = row.comment;
				}
				this.groupDialogVisible = true;
				this.r_group_id = row.group_id;
				this.r_user_id = row.user_id;
			},
			sureReject(r_group_id, r_user_id, status, comment) {
				if (comment == '' && status === 2) {
					this.$message.warning("请填写拒绝理由~");
					return;
				}

				let success = res => {
					this.groupDialogVisible = false;
					this.get_groupList();
				};
				this.$ajax({
					url: "/api/group/group_user",
					method: "put",
					data: {
						group_id_w: r_group_id,
						user_id_w: r_user_id,
						status: status,
						comment: comment
					},
					func: {
						success: success
					}
				});
			},
			get_groupList() {
				let success = res => {
					if (res.data.data) {
						let idString = "";
						let arrData = res.data.data;
						for (let i = 0; i < arrData.length; i++) {
							if (arrData[i].status == 1) {
								idString += arrData[i].id + ",";
							}
						}
						idString = idString.substring(0, idString.length - 1);
						this.get_approval_member(idString);
					}

				};
				this.$ajax({
					url: "/api/group/group_list",
					method: "get",
					params: {
						order_1: this.orderby,
						page: this.page_index,
						length: this.page_size,
						flag: "home",
						create_id: this.$store.getters.userInfo.id,
						status: "1,2,3,4"
					},
					func: {
						success: success
					}
				});
			},
			get_approval_member(_id) {
				if (_id === '') {
					return;
				}
				let success = res => {
					this.approvalData = res.data.data;
					this.total_number = res.data.data_sum;
				};
				this.$ajax({
					url: "/api/group/group_user",
					method: "get",
					params: {
						group_id: _id,
						status: 3,
						add_type: 1,
						data_type: 2,
						page: this.page_index,
						size: this.page_size
					},
					func: {
						success: success
					}
				});
			},
			currentChange(val) {
				this.page_index = val;
				this.get_groupList();
			}
		}
	};
</script>
